<template>
	<view class="classlist">
		<view v-for="(Item, Index) of arrList" :key="Item[0]?._id">
			<uv-skeletons :loading="loading[Index]" :skeleton="skeleton" :animate="true">
				<view class="content">
					<navigator
						:url="'/pages/preview/preview?id=' + classListId + '&index=' + (+index + 1 + Index * 12) + '&name=' + className"
						class="item" v-for="(item, index) of Item" :key="item._id">
						<!-- #ifdef H5 -->
						<image mode="aspectFill" v-lazy-load="item.smallPicurl"></image>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" :src="item.smallPicurl" lazy-load></image>
						<!-- #endif -->

					</navigator>
				</view>
			</uv-skeletons>
		</view>
		<view class="bottom" v-show="noData">
			没有更多了呦~~
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { apiGet } from '@/api/apis.js';
import { onLoad, onReachBottom, onUnload, onShareAppMessage } from '@dcloudio/uni-app';
import { usePreviewDataStore } from '@/store/preview_data.js'

// 将获取的数据分组
const arrList = ref([]);

// 分类列表的id
const classListId = ref();

// 分类列表所属分类
const className = ref();

// 触底加载，添加第几页数据
let pageNum = 1;

// 一页几条数据
const pageSize = 12;

// 是否还有数据
const noData = ref(false);

// 防抖
let flag = true

const store = usePreviewDataStore()

const loading = ref([]);

const classType = ref()



onLoad((options) => {
	const { id = null, name = null, type = null } = options;
	// #ifdef H5
	let cid = sessionStorage.getItem('classListId')
	let cname = sessionStorage.getItem('className')
	let ctype = JSON.parse(sessionStorage.getItem('classType'))
	if (!(cid && cname)) {
		// 如果没有缓存的数据，则使用传递过来的数据
		sessionStorage.setItem('classListId', id)
		sessionStorage.setItem('className', name)
		sessionStorage.setItem('classType', type)
	}
	//  #endif
	classListId.value = cid || id;
	className.value = cname || name;
	classType.value = ctype || type;
	uni.setNavigationBarTitle({
		title: name
	});
	if (flag) getData(classType.value);
});




// 触底加载的延时时间
const delay = 200;


// 触底加载
onReachBottom(() => {

	// 无数据直接退出
	if (noData.value) return;
	if (flag) {
		pageNum++;
		// 随意赋值，先展示出骨架屏
		arrList.value[pageNum - 1] = 1
		getData(classType.value);
	}
	else {
		setTimeout(() => {
			// if(flag){
			pageNum++;
			getData(classType.value);
			// }
		}, delay)
	}
});




// 获取数据
const getData = async (type) => {
	flag = false



	// 通过在promise中进行判断，在返回到data，实现在getData函数作用域中实现代码同步执行，否则会getData函数内部会变为异步执行，导致改行代码后面使用不了data常量
	const data = await new Promise(async (res, rej) => {
		if (type) res((await apiGet('userWallList', { type, pageNum, pageSize })).data)
		else res((await apiGet('wallList', { classid: classListId.value, pageNum, pageSize })).data)
	})

	loading.value.push(true)

	// 对数据是否还有多进行判断
	if (data.length < 12) noData.value = true;

	arrList.value[pageNum - 1] = data

	// 将数据通过pinia传递到preview中
	store.updateList(data)

	setTimeout(() => {
		loading.value[pageNum - 1] = false
		flag = true
	}, delay)

};

const skeleton = ref([
	{
		type: 'flex',
		style: 'display: grid;grid-template-columns: repeat(3, 1fr);gap:5rpx;padding:10rpx;width:100%;',
		children: [
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			},
			{
				type: 'custom',
				style: 'width:100%;height:442rpx;'
			}
		]
	}
]);


// 退出页面，销毁数据
onUnload(() => {
	store.deleteList()

	// #ifdef H5
	// 页面卸载前清除缓存
	sessionStorage.removeItem('classListId')
	sessionStorage.removeItem('className')
	sessionStorage.removeItem('classType')
	// #endif
})


// 分享给朋友
onShareAppMessage(() => {
	return {
		title: '鸡你太美',
		path: `/pages/classlist/classlist?id=${classListId.value}&name=${className.value}`
	}
})


</script>
<style scoped lang="scss">
.classlist {
	.content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5rpx;
		padding: 5rpx 5rpx 0 5rpx;

		.item {
			height: 440rpx;
			border-radius: 0;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}

	.bottom {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 34rpx;
		// text-shadow: 0 0 10rpx #999;
	}
}
</style>
<style></style>
